<template>
    <div id = "background">
    <div class = "container">
            <div class = "header">
                用户登录
            </div>
            <div class = "form">
                <input type ="text" name = "username" v-model.trim="name" class = "input" placeholder="用户名" @input="checkForm">
                <input type = "password" name = "password" v-model.trim="password" class = "input" placeholder="密码" @input="checkForm">
            </div>
            <div class = "keep">
                <input @click="handlesave" id = "no" type = "checkbox" value = "0">
                <label for = "no">下次自动登录</label>
            </div>
            <button @click.prevent="handlelogin" class="btn" type = "submit" :disabled="flag">登录</button>
            <button @click.prevent="handleregister" class="btn" type="register">注册</button>
        </div>
    </div>
</template>
<script>
import { ref } from 'vue';
import axios from 'axios';
    export default{
       

        name:'login',
        data(){
            return{
                name:"",//姓名，用v-model绑定监听，将输入的字符串赋值给name变量
                password:"",//密码
                st:"false",
                flag:true
            }
        },
        methods:{
            handleregister(){
                this.$router.push('/register')
            },
            handlelogin(){
                axios.get('http://localhost:9001/MasterAccount/login', 
            { params: 
                { account: this.name, password: this.password } 
            }) 
                .then(response => 
                { 
                    if(response.data){
                        alert("您已经登录成功!")
                        this.$router.push('/administrator');
                    }
                    else{
                        alert("密码错误，请重新登录!")
                    }
                }) 
                    .catch(error => { alert('连接失败：' + error.message); });              
            },
            checkForm() {
            if (this.name && this.password) {
                this.flag = false;
            } else {
                this.flag = true;
            }
        }
        }
        
    }
</script>
<style scoped>
html{
    height: 100%;
}
#background {
  width: 100%;
  height: 100%;
  background: url("../images/微信图片_20240702112551.png") no-repeat center center;
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2; /* background 在底层 */
}

.container {
    background-color: #00000090;
        width: 450px;
        height: 600px;
        border-radius: 15px;
        padding: 0 50px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
}
    
.form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 50px; /* 调整输入框和按钮之间的间距 */
}
    .header{
        font-size: 38px;
        font-weight: bold;
        text-align: center;
        line-height: 200px;
        color: #fff;
    }
    .input{
        background-color: rgba(255, 255, 255, 0.5);
        display: block;
        width: 100%;
        margin-bottom: 30px;
        border: 0;
        padding: 10px;
        border-bottom: 1px solid rebeccapurple;
        font-size: 20px;
        outline: none;
    }
    .input::placeholder{
        text-transform: uppercase;
    }
    .btn{
        text-align: center;
        position: relative;
        padding: 10px;
        margin: 0 auto;
        width: 40%;
        margin-top: 40px;
        margin-right: 45px;
        background-image: linear-gradient(to right,#081731,#1212d7);
        color: #fff;
    }
    .msg{
        text-align: center;
        line-height: 88px;

    }
    a{
        text-decoration-line: none;
        color: #abc1ee;
    }
</style>